import React, { useState } from 'react';
import { Layout, Menu, Dropdown, Avatar, Space, Switch } from 'antd';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UserOutlined,
  LogoutOutlined,
  BulbOutlined,
  DashboardOutlined,
} from '@ant-design/icons';
import { Outlet, useNavigate } from 'react-router-dom';
import useStore from '../store';
import Logo from '../components/Logo';

const { Header, Sider, Content } = Layout;

const MainLayout = () => {
  const [collapsed, setCollapsed] = useState(false);
  const navigate = useNavigate();
  const user = useStore((state) => state.user);
  const logout = useStore((state) => state.logout);
  const theme = useStore((state) => state.theme);
  const setTheme = useStore((state) => state.setTheme);

  const menuItems = [
    {
      key: 'dashboard',
      icon: <DashboardOutlined />,
      label: '仪表盘',
    },
    {
      key: 'users',
      icon: <UserOutlined />,
      label: '用户管理',
    },
  ];

  const handleLogout = () => {
    logout();
    navigate('/login');
  };

  const userMenu = {
    items: [
      {
        key: 'logout',
        icon: <LogoutOutlined />,
        label: '退出登录',
        onClick: handleLogout,
      },
    ],
  };

  const toggleTheme = (checked) => {
    setTheme(checked ? 'dark' : 'light');
  };

  // 根据主题设置样式
  const layoutStyle = {
    minHeight: '100vh',
    background: theme === 'dark' ? '#141414' : '#f0f2f5',
  };

  const siderStyle = {
    background: theme === 'dark' ? '#141414' : '#fff',
    boxShadow: theme === 'dark' ? 'none' : '2px 0 8px 0 rgba(29,35,41,.05)',
  };

  const headerStyle = {
    padding: '0 16px',
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    background: theme === 'dark' ? '#141414' : '#fff',
    color: theme === 'dark' ? '#fff' : 'rgba(0, 0, 0, 0.85)',
    borderBottom: `1px solid ${theme === 'dark' ? '#303030' : '#f0f0f0'}`,
  };

  const logoStyle = {
    height: 32,
    margin: 16,
    background: theme === 'dark' ? 'rgba(255, 255, 255, 0.2)' : '#001529',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    color: '#fff',
  };

  const contentStyle = {
    margin: '24px 16px',
    padding: 24,
    background: theme === 'dark' ? '#141414' : '#fff',
    borderRadius: 4,
  };

  return (
    <Layout style={layoutStyle}>
      <Sider 
        trigger={null} 
        collapsible 
        collapsed={collapsed}
        style={siderStyle}
        width={250}
      >
        <Logo collapsed={collapsed} />
        <Menu
          theme={theme}
          mode="inline"
          defaultSelectedKeys={['dashboard']}
          items={menuItems}
          onClick={({ key }) => navigate(key)}
          style={{ 
            background: 'transparent',
            borderRight: theme === 'dark' ? '1px solid #303030' : 'none',
          }}
        />
      </Sider>
      <Layout>
        <Header style={headerStyle}>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
              className: 'trigger',
              onClick: () => setCollapsed(!collapsed),
              style: { 
                fontSize: '18px', 
                cursor: 'pointer',
                color: theme === 'dark' ? '#fff' : 'rgba(0, 0, 0, 0.85)',
              },
            })}
          </div>
          <Space size={16}>
            <Space>
              <BulbOutlined style={{ color: theme === 'dark' ? '#fff' : 'rgba(0, 0, 0, 0.85)' }} />
              <Switch
                checkedChildren="暗黑"
                unCheckedChildren="明亮"
                checked={theme === 'dark'}
                onChange={toggleTheme}
              />
            </Space>
            <Dropdown menu={userMenu} placement="bottomRight">
              <Space style={{ cursor: 'pointer' }}>
                <Avatar icon={<UserOutlined />} />
                <span>{user?.username}</span>
              </Space>
            </Dropdown>
          </Space>
        </Header>
        <Content style={contentStyle}>
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
};

export default MainLayout;